<header>
    基础用法
</header>
<p>
    我们在画布的中心绘制一个正方形，你可以先看看最终的效果：
</p>
<button tag="webgl-dot">查看用例</button>
<h2>
    绘制流程
</h2>
<p>
    <span class="pip-block">
        着色器
    </span>
    →
    <span class="pip-block">
        数据
    </span>
    →
    <span class="pip-block">
        绘制
    </span>
</p>
<p>
    上面的流程看起来是不是很简单，无论是简单的3D还是复杂的3D，需要且需要按照上面的流程进行（当然，在细节上会有一些不同）。
</p>
<p class="warn">
    记住这个流程，后续的说明也按照这个思路进行。
</p>
<h2>
    着色器
</h2>
<p>
    绘制的第一步，就是准备好两个着色器：
    <span class="important">顶点着色器</span>
    和
    <span class="important">片段着色器</span>
    。前者用于描述绘制的图形的点的位置，后者用于描述每个点的颜色。
</p>
<p>
    可能这样说你会无法理解，其实简单的说就是：我们在绘图的时候，会一次性的把数据都传递给GPU，传递给GPU的数据需要一些"整理"后再使用，而着色器就是驻留在GPU上的这段"整理程序"。
</p>
<p>
    我们传递的数据是什么？不就是点的位置和点的颜色吗。所以，着色器就分为了顶点着色器和片段着色器（有时候也叫片元着色器），前者处理点，后者处理颜色。
</p>
<h3>
    定义着色器
</h3>
<p>
    所以，让我们先看看这里的顶点着色器的具体代码：
</p>
<pre tag="javascript">
void main(){
    gl_Position=vec4(0.0,0.0,0.0,1.0);
    gl_PointSize=100.0;
}
</pre>
<p>
    内置变量gl_Position表示点的位置，gl_PointSize表示点的大小。
</p>
<p class="warn">
    我们这里为了简单，点的位置和大小是写死的，实际可以有更丰富的方式进行设置，这里先不说明了。
</p>
<p>
    那么，点的颜色在哪里设置？没错，在片段着色器，看看具体代码：
</p>
<pre tag="javascript">
void main(){
    gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
</pre>
<p>
    同样的存在一个内置变量，这里叫gl_FragColor， 其就表示点的颜色。
</p>
<h3>
    着色器生效
</h3>
<p>
    目前为止，上面的两个着色器只是两段字符串，还需调用webgl的方法生效（这里的代码比较固定，查看例子即可）。
</p>
<h2>
    数据
</h2>
<p>
    由于我们这里把数据写死了，因此不需要传递，就先不再赘述了。
</p>
<h2>
    绘制
</h2>
<p>
    我们这里写死的数据就一个点，由此直接：
</p>
<pre tag="javascript">
    gl.drawArrays(gl.POINTS, 0, 1);
</pre>
<p>
    这样，一个点就出来了。
</p>
<p class="warn">
    除了绘制点，我们还可以绘制线和三角形，当然，绘制多个点、线或三角形的时候，也有更丰富的方法，此外，除了常规绘制方法，还有对应的更高效的索引绘制方法。
</p>